<template>
  <el-collapse :value="isActive ? 'filter-box' : ''" class="hui-mb-1">
    <el-collapse-item name="filter-box">
      <template slot="title">
        {{ title }}
        <h-icon :icon="icon" size="13px" class="hui-ml-8px"></h-icon>
      </template>
      <slot></slot>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
/**
 * h-filter-box
 * @module components/h-filter-box
 * @desc 筛选器
 *
 * @param { array } title = 标题，默认值为"筛选器", 可传入其他值替代标题
 * @param { array } icon = 图标，默认值为"icon-filtervariant", 可传入其他值代替图标
 * @param { slot } slot = 传入内容模版
 */
export default {
  name: 'h-filter-box',
  componentName: 'h-filter-box',
  props: {
    title: {
      type: String,
      default: '筛选器'
    },
    icon: {
      type: String,
      default: 'icon-filtervariant'
    },
    isActive: Boolean
  }
}
</script>

<style lang="less"></style>
